﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
    <script type="text/javascript" language="javascript" src="file/jquery-1.7.min.js"></script>
	<script type="text/javascript" language="javascript" src="file/jquery.dataTables.js"></script>
    <script language="javascript">
    var xmlhttp;
    var oPageTable;
    
    function init() {
        // put more code here in case you are concerned about browsers that do not provide XMLHttpRequest object directly
        xmlhttp = new XMLHttpRequest();
        $.support.cors = true;
    }
    
    function getdetails() {
        var page_code = document.getElementById("page_code");
        var url = "pages/" + page_code.value;

        $.ajax({
            type:   "GET",
            url:    url,
            data:   "",
            processData:    false,
            contentType:    "application/json",
            dataType:       "text",
            success:
                function(msg) {
                    var page_type =  document.getElementById("page_type");
                    var page_urgent =  document.getElementById("page_urgent");
                    if (msg) {
	                    var det = eval( "(" +  msg + ")");
	                    if (det != null && det.Code != "" ) {
	                        page_type.value = det.Type;
	                        page_urgent.value = det.IsUrgent;
	                    } else {
	                    	alert("ERROR: Unexpected return from server.");
	                    }
                    } else {
                    	alert("ERROR: Unexpected return from server.");
                    }
                 },
            error:  
                 function(xhr, status, exception) {
                    if (exception)
                    {
                        alert("ERROR: " + exception);
                    } else {    
                        alert ( "Unknown server error." );
                    }
                    return;
                }
        });
	}

 
    function clearPage() {
        var page_code = document.getElementById("page_code");
        var url = "pages/" + page_code.value;
		alert("Clear: " + url);
		
        $.ajax({
            type:   "DELETE",
            url:    url,
            data:   "",
            processData:    false,
            contentType:    "application/json",
            dataType:       "text",
            success:
                function(msg) {

                    var success = eval( "(" +  msg + ")");
                    if (success) {
                    	refreshPages();
                    } else { 
                        alert("Invalid Page Code");
                    }
                 },
            error:  
                 function(xhr) {
                    if (xhr.responseText)
                    {
                        alert("ERROR: " + xhr.responseText);
                    } else {    
                        alert ("Server Unavailable?" );
                    }
                    return;
                }
        });
	}

 
    function modify() {
        var page_code = document.getElementById("page_code");
        var page_type = document.getElementById("page_type");
        var page_urgent = document.getElementById("page_urgent");

        var isUrgent = (page_urgent.value.toLowerCase() == "true");
        
        var pageObj = {"Code" : page_code.value, "Type" : page_type.value, "IsUrgent" : isUrgent };
        var page_json = JSON.stringify(pageObj);
        var url = "pages/" + page_code.value;

        $.ajax({
            type:   "PUT",
            url:    url,
            data:   page_json,
            processData:    false,
            contentType:    "application/json",
            dataType:       "text",
            success:
                function(msg) {
                    var success = eval( "(" +  msg + ")");
                    if (success) {
                    	refreshPages();
                    } else { 
                        alert("Invalid Page Code");
                    }
                 },
            error:  
                 function(xhr) {
                    if (xhr.responseText)
                    {
                        alert("ERROR: " + xhr.responseText);
                    } else {    
                        alert ( "Unknown server error." );
                    }
                    return;
                }
        });
    }

    function addPage() {
        var page_code = document.getElementById("page_code");
        var page_type = document.getElementById("page_type");
        var page_urgent = document.getElementById("page_urgent");

        var isUrgent = (page_urgent.value.toLowerCase() == "true");
        
        var pageObj = {"Code" : page_code.value, "Type" : page_type.value, "IsUrgent" : isUrgent };
        var page_json = JSON.stringify(pageObj);
        var url = "pages";
        alert("POST URI: " + url);
        alert("Page JSON: " + page_json);

        $.ajax({
            type:   "POST",
            url:    url,
            data:   page_json,
            processData:    false,
            contentType:    "application/json",
            dataType:       "text",
            success:
                function(msg) {
					refreshPages();
                 },
            error:  
                 function(xhr) {
                    if (xhr.responseText)
                    {
                        alert("ERROR: " + xhr.responseText);
                    } else {    
                        alert ( "Unknown server error. Service Unavailable?" );
                    }
                    return;
                }
        });

	}

    function refreshPages() {
            var url = "pages";

            $.ajax({
                type:   "GET",
                url:    url,
                data:   "",
                processData:    false,
                contentType:    "application/json",
                dataType:       "text",
                success:
                    function(msg) {

                        var aaData = eval( "(" +  msg + ")");
                        if (aaData != null ) {
							oPageTable.fnClearTable(false);
							oPageTable.fnAddData(aaData);
                        }
                     },
                error:  
                     function(xhr) {
                        if (xhr.responseText)
                        {
                            alert("ERROR: " + xhr.responseText);
                        } else {    
                            alert ( "Unknown server error." );
                        }
                        return;
                    }
            });
    }

    </script>

	<script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            oPageTable = $('#pageTable').dataTable( {
                "bDestroy": true,
                "bProcessing": true,
                "aoColumns": [
                    { "mDataProp": "Code" },
                    { "mDataProp": "Type" },
                    { "mDataProp": "IsUrgent" }
                ]
            } );
        } );
    </script>

</head>
<body  onload="init()">
<h1>Call Page Service v0.10</h1>

<table width="100%">
    <tr>
        <td valign="top" width="50%">
            <table>
                <tr>
                    <td width="45%">Enter Page Code :  </td>
                    <td>
                    	<input type="text" id="page_code" size="10"/>
                   	</td>     
                </tr>
                <tr>
                    <td>Page Type :  </td>
                    <td>
                        <input type="text" id="page_type" size="20"/>
                    </td>
                </tr>
          
                <tr>
                    <td>Page Is Urgent? : </td>
                    <td>
                        <input type="text" id="page_urgent" size="10"/>
                    </td>
                </tr>
                <tr>
                     <td colspan="2">
                        <input type="button" value="Get Details" onclick="getdetails()"/>
                        <input type="button" value="Modify" onclick="modify()"/>
                        <input type="button" value="Delete" onclick="clearPage()"/>
                        <input type="button" value="Add" onclick="addPage()"/>
                    </td>
                </tr>
            </table>
        </td>
        <td>
            <table width="100%">
                <tr>
                    <h2>Active Pages</h2>
                    <input type="button" value="Refresh" onclick="refreshPages()"/>
                </tr>
                <tr>
                    <table id="pageTable" width="300">
                        <thead>
                            <tr>
                                <th>Code</th>
                                <th>Type</th>
                                <th>Is Urgent?</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>A</td>
                                <td>A</td>
                                <td>A</td>
                            </tr>
                            <tr>
                                <td>B</td>
                                <td>B</td>
                                <td>B</td>
                            </tr>
                        </tbody>
                    </table>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>
</HTML>
